import React, { ReactNode } from 'react';
import moment from 'moment';
import { DatePicker, Form } from 'antd';
import { ObjectType } from '@/pages/riskControl/utils';
import * as tools from '@/utils/tools';
import style from './BaseRangePicker.less';

const { RangePicker } = DatePicker;
const formatDate = 'YYYY-MM-DD HH:mm:ss';

/**
 * 日期快捷选择工具
 */
export const datePickRanges = {
  今日: [moment().startOf('day'), moment().endOf('day')],
  昨日: [
    moment()
      .subtract(1, 'days')
      .startOf('day'),
    moment()
      .subtract(1, 'days')
      .endOf('day'),
  ],
  最近三天: [
    moment()
      .subtract(2, 'days')
      .startOf('day'),
    moment().endOf('day'),
  ],
  最近七天: [
    moment()
      .subtract(6, 'days')
      .startOf('day'),
    moment().endOf('day'),
  ],
  最近十五天: [
    moment()
      .subtract(14, 'days')
      .startOf('day'),
    moment().endOf('day'),
  ],
  最近三十天: [
    moment()
      .subtract(29, 'days')
      .startOf('day'),
    moment().endOf('day'),
  ],
};

export function BaseRangePicker({
  getFieldDecorator,
  id,
  label = '选择日期',
  placeholder = ['开始时间', '结束时间'],
  labelCol = { span: 4 },
  wrapperCol = { span: 4 },
  className,
}: ObjectType): ReactNode {
  return (
    <Form.Item
      label={label}
      labelCol={labelCol}
      wrapperCol={wrapperCol}
      className={style.baseRangePickerWrap}
    >
      {getFieldDecorator(id, {
        initialValue: tools.initialTimeWithMill(),
      })(
        <RangePicker
          format={formatDate}
          placeholder={placeholder}
          className={className}
          // @ts-ignore
          ranges={datePickRanges}
          showTime={{
            hideDisabledOptions: true,
            defaultValue: tools.initialTimeWithMill(),
          }}
        />,
      )}
    </Form.Item>
  );
}
